<template>
  <ZZDialog class="myself" title="属性编辑" @close="callbackclose()">
    <div>
      <ul class="toolbar">
        <li><i class="fa fa-location-arrow" title="定位" @click="onFlyTo"></i></li>
        <li><i class="fa fa-trash" title="删除" @click="onDelete"></i></li>
        <li><i class="fa fa-save" title="保存文件" @click="onSave"></i></li>
        <input id="input_plot_file" type="file" accept=".json" style="display: none" />
      </ul>
    </div>
    <el-tabs v-model="activeName" class="demo-tabs" tab-position="bottom">
      <el-tab-pane class="tab-context" label="属性" name="first">
        <DSubTable :modelValue="attrRef"></DSubTable>
      </el-tab-pane>
      <el-tab-pane class="tab-context" label="坐标" name="second">
        <table border="1" cellspacing="0" cellpadding="0">
          <div v-for="(item, index) in lonlatRef" :key="index" class="tb-contents">
            <tr>
              <td class="tb-content" colspan="2">
                第{{ index + 1 }}点
              </td>
            </tr>
            <tr>
              <td class="tb-content">
                经度
              </td>
              <td class="tb-content">
                <el-input-number v-model="item.lon" size="small" :step=0.00001 controls-position="right" />
              </td>
            </tr>
            <tr>
              <td class="tb-content">
                纬度
              </td>
              <td class="tb-content">
                <el-input-number v-model="item.lat" size="small" :step=0.00001 controls-position="right" />
              </td>
            </tr>
            <tr>
              <td class="tb-content">
                高度
              </td>
              <td class="tb-content">
                <el-input-number v-model="item.height" size="small" :step=1.0 controls-position="right" />
              </td>
            </tr>
          </div>
        </table>
      </el-tab-pane>
      <el-tab-pane class="tab-context" label="样式" name="third">
        <DSubTable :modelValue="styleRef"></DSubTable>
      </el-tab-pane>
    </el-tabs>
  </ZZDialog>
</template>

<script>

import ZZDialog from '../common/ZZDialog.vue';
import { attrConfig } from './plotData/attrConfig';
import DSubTable from '../common/DSubTable.vue';

export default {
  components: {
    ZZDialog,
    DSubTable
  },
  data() {
    return {
      activeName: 'third',
      lonlatRef: [],
      attrRef: [],
      styleRef: [],
      defaultAttrList: [
        { name: 'id', label: '主键', type: 'label', defval: '' },
        { name: 'name', label: '名称', type: 'text', defval: '' },
        { name: 'remark', label: '备注', type: 'textarea', defval: '' }
      ],
    }
  },
  mounted() {
    attrConfig['curve'] = attrConfig['polyline'];
    this.edit(window.drawEntitys);
    this.bus.$on('updateAttr', (e) => {
      this.attrRef.forEach(item => {
        if (item.name == e.name) {
          item.value = e.value
        }
      });
      this.styleRef.forEach(item => {
        if (item.name == e.name) {
          item.value = e.value
        }
      });
    })
  },
  methods: {
    updateLonlat(lonlat) {
      if (!lonlat) {
        return;
      }
      // if (!Object.prototype.hasOwnProperty.call(config, 'height')) {
      //   config.height = true;
      // }
      this.lonlatRef.length = 0;
      lonlat.forEach((item) => {
        this.lonlatRef.push({
          lon: item[0],
          lat: item[1],
          height: item[2] || 0.0
        });
      });
    },
    updateStyleShow() {
      let styles = this.styleRef;
      let impacts = []; // 所有需要控制的
      let showImpacts = []; // 需要显示的

      for (let i = 0; i < styles.length; ++i) {
        let item = styles[i];
        if (item.impact) {
          impacts.push(...item.impact);
          if (item.value == true) {
            showImpacts.push(...item.impact);
          }
        }
        if (item.data) {
          for (let j = 0; j < item.data.length; ++j) {
            let child = item.data[j];
            if (child.impact) {
              impacts.push(...child.impact);
              if (item.value == child.value) {
                showImpacts.push(...child.impact);
              }
            }
          }
        }
      }

      for (let i = 0; i < styles.length; ++i) {
        let item = styles[i];
        if (!impacts.includes(item.name) || showImpacts.includes(item.name)) {
          item.display = true;
        }
        else {
          item.display = false;
        }
      }

      return false;
    },
    updateAttr(config, attr) {
      let arrConfig = config.attrList || this.defaultAttrList;
      this.attrRef.length = 0;
      for (let i = 0; i < arrConfig.length; ++i) {
        var edit = arrConfig[i];
        if (edit.type == 'hidden') continue;

        var attrName = edit.name;
        var attrVal = attr.attr[attrName] || '';
        this.attrRef.push({
          name: edit.name,
          type: edit.type,
          label: edit.label,
          value: attrVal
        });
      }
    },
    updateStyle(config, attr) {
      this.styleRef.length = 0;
      for (let idx = 0; idx < config.style.length; idx++) {
        let edit = config.style[idx];
        if (edit.type == 'hidden') continue;

        let attrName = edit.name;
        let attrVal = attr.style[attrName];
        this.styleRef.push({
          name: edit.name,
          type: edit.type,
          label: edit.label,
          value: attrVal,
          data: edit.data,
          impact: edit.impact
        });
      }
    },
    onDelete() {
      if (this.currentEntity) {
        window.drawControl.deleteEntity(this.currentEntity);
      }
    },
    onFlyTo() {
      let viewer = this.$store.state.viewer
      if (this.currentEntity) {
        //参数解释：线面数据：scale控制边界的放大比例，点数据：radius控制视距距离
        viewer.zz.flyTo(this.currentEntity, { scale: 0.5, radius: 1000 });
      }
    },
    onSave() {
      if (this.currentEntity) {
        let context = zz3d.draw.attr.toGeoJSON(this.currentEntity);
        context = JSON.stringify(context);
        zz3d.util.downloadFile('标绘.json', context);
      }
    },
    edit(opt) {
      this.currentEntity = opt.entity;
      let attr = opt.entity.attribute;
      let lonlat = opt.lonlats;
      let config = attrConfig[attr.edittype || attr.type] || {};
      config.style = config.style || {};

      this.updateLonlat(lonlat, config.points);
      this.updateStyle(config, attr);
      this.updateStyleShow();
      this.updateAttr(config, attr);
    },
    callbackclose(){
      this.$emit('close') 
    },
  },
  watch: {
    lonlatRef: {
      handler(newValue) {
        let positions = [];
        for (let i = 0; i < newValue.length; ++i) {
          let item = newValue[i];
          let pt = Cesium.Cartesian3.fromDegrees(Number(item.lon), Number(item.lat), Number(item.height));
          positions.push(pt);
        }
        window.drawControl.setPositions(positions);
      },
      deep: true
    },
    attrRef: {
      handler(newValue) {
        let config = Object.assign({}, this.currentEntity.attribute);
        let attr = config.attr;
        for (let i = 0; i < newValue.length; ++i) {
          let item = newValue[i];
          attr[item.name] = item.value;
        }
        window.drawControl.updateAttribute(config);
      },
      deep: true
    },
    styleRef: {
      handler(newValue) {
        let config = Object.assign({}, this.currentEntity.attribute);
        let style = config.style;
        for (let i = 0; i < newValue.length; ++i) {
          let item = newValue[i];
          style[item.name] = item.value;
        }
        window.drawControl.updateAttribute(config);
        this.updateStyleShow();
      },
      deep: true
    }
  }
}
</script>
<style scoped>
.myself {
  position: absolute;
  left: 10px;
  top: 420px;
  min-width: 100px;
  width: 230px;
  height: 400px;
}
.demo-tabs{
  margin: auto;
}

.tab-context {
  height: 280px;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  align-items: start;
  justify-content: center;
}
.tb-contents{
  border-bottom:1px solid  rgb(128,128,128);
}
.tb-content{
  padding: 4px;
  border:0px solid rgb(54,54,55) ;
}

</style>

<style scoped src="./toolbar.css"></style>
